import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '../components/HelloWorld'
// import Profile from "../components/Profile";
// import HomeNews from "../components/HomeNews";
// import HomeMessage from "../components/HomeMessage";
// import Home from '../components/Home'
// import About from '../components/About'
// import User from "../components/User"
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const Profile = () => import('../components/Profile')

//1、通过Vue.use(plugin),安装插件
Vue.use(Router)

const originalpush = Router.prototype.push
Router.prototype.push = function (location) {
  return originalpush.call(this, location).catch(err => err)
}
//2、创建vueRouter对象
const routes = [
  //配置首页的默认入口。
  {
    path: '',
    redirect: '/home',
  },
  {
    path: '/home',
    component: Home,
    meta: {
      title: '首页'
    },
    children: [
      //去掉默认的news路由
      // {
      //   path: '',
      //   redirect: 'news'
      // },
      {
        path: 'news',
        component: HomeNews
      },
      {
        path: 'message',
        component: HomeMessage
      }
    ]
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于'
    },
  },
  {
    path: '/user/:name',
    component: User,
    meta: {
      title: '用户'
    },
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: '档案'
    },
    // beforeEnter: (to,from,next)=>{
    //   console.log('这是进入档案之前的操作！！！');
    //   next();
    // }
  }
]


//3、将对象导出到vue实例当中去使用
const router = new Router({
  //配置路由和组件之间的应用关系
  routes,
  //切换到history模式
  mode: 'history',
  //将vue自带的一个active设置成我们熟悉的
  linkActiveClass: 'active'
})

// router.beforeEach((to, from, next) => {
//   document.title = to.matched[0].meta.title;
//   console.log('进入之前的展示！！！')
//   next();
// })
//
// 这里的话，因为是后置钩子函数，所以不再需要主动的去调用next()函数
// router.afterEach((to,from)=>{
//   console.log('进入之后的展示！！！')
// })

export default router;
